import React from 'react';
import {
  Card,
  Form,
  Select,
  InputNumber,
  Switch,
  Radio,
  Button,
  Checkbox,
  Row,
  Table,
  Col,
  Input,
  Empty,
} from 'antd';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import SearchBox from '@/components/SearchBox';


const { Option } = Select;

import './index.less';
import cls from 'classnames';

const switchList = [
  {
    title: '第一选择',
    key: 'one',
    visible: true,
    md: 3,
    sm: 24,
    params: {},
  },
  {
    title: '第二选择',
    key: 'two',
    visible: true,
    md: 3,
    sm: 24,
    params: {},
  },
  {
    title: '第三选择',
    key: 'three',
    visible: true,
    md: 3,
    sm: 24,
    params: {},
  },
  {
    title: '第四选择',
    key: 'four',
    visible: true,
    md: 3,
    sm: 24,
    params: {},
  },
  {
    title: '第五选择',
    key: 'five',
    visible: true,
    md: 3,
    sm: 24,
    params: {},
  },
];

const searchList: any = [
  {
    name: 'theme-input',
    placeholder: '搜索输入框',
    componentType: 'Input',
    allowClear: true,
    md: 8,
    sm: 24,
    component: (
      <div>
        <Input
          placeholder={'搜索输入框'}
          className={cls('theme-search-input')}
        />
      </div>
    ),
  },
];

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data: any = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export const TabBusiness: React.FC = React.memo(() => {
  return (
    <div className={cls('theme-pane-layout')}>
      <ScrollBarLayout style={{ padding: '0px 0px 5px' }}>
        <Card title="搜索组件">
          <SearchBox
            searchList={searchList}
            onSwitch={() => { }}
            switchList={switchList}
            onSearch={() => { }}
            onReset={() => { }}
          />
        </Card>

        <Card title="表格" style={{ marginTop: '16px' }}>
          <Table
            rowSelection={{ type: 'checkbox' }}
            columns={columns}
            dataSource={data}
            size={'small'}
            bordered
          />
        </Card>

        <Card
          title="按钮"
          style={{ marginTop: '16px' }}
          bodyStyle={{ padding: "10px" }}
        >
          <Row gutter={[16, 16]}>
            <Col>
              <Button type="primary">primary</Button>
            </Col>
            <Col>
              <Button type="default">default</Button>
            </Col>
            <Col>
              <Button type="link">link</Button>
            </Col>
            <Col>
              <Button type="dashed">dashed</Button>
            </Col>
            <Col>
              <Button type="ghost">ghost</Button>
            </Col>
            <Col>
              <Button type="default" danger>
                danger（default）
              </Button>
            </Col>
            <Col>
              <Button type="primary" danger>
                danger（primary）
              </Button>
            </Col>
            <Col>
              <Button type="link" danger>
                danger（link）
              </Button>
            </Col>
            <Col>
              <Button type="dashed" danger>
                danger（dashed）
              </Button>
            </Col>
          </Row>
        </Card>

        <Card
          title="表单组件"
          style={{ marginTop: '16px' }}
          bodyStyle={{ padding: "10px" }}
        >
          <Form
            name="validate_other"
            initialValues={{
              'input-number': 3,
              'checkbox-group': ['A', 'B'],
              rate: 3.5,
            }}
            {...formItemLayout}
          >
            <Form.Item name="select" label="输入框" hasFeedback>
              <Input placeholder="这是输入框" />
            </Form.Item>

            <Form.Item name="select-multiple" label="多选框">
              <Select mode="multiple" placeholder="请选择颜色">
                <Option value="red">红</Option>
                <Option value="green">绿</Option>
                <Option value="blue">蓝</Option>
              </Select>
            </Form.Item>

            <Form.Item label="计数器">
              <Form.Item name="input-number" noStyle>
                <InputNumber min={1} max={10} />
              </Form.Item>
            </Form.Item>

            <Form.Item name="switch" label="开关" valuePropName="checked">
              <Switch checked={true} />
            </Form.Item>

            <Form.Item name="radio-group" label="单选" initialValue={'a'}>
              <Radio.Group>
                <Radio value="a">单选 1</Radio>
                <Radio value="b">单选 2</Radio>
                <Radio value="c">单选 3</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item name="radio-button" label="单选按钮" initialValue={'b'}>
              <Radio.Group buttonStyle="outline">
                <Radio.Button value="a">单选按钮 1</Radio.Button>
                <Radio.Button value="b">单选按钮 2</Radio.Button>
                <Radio.Button value="c">单选按钮 3</Radio.Button>
              </Radio.Group>
            </Form.Item>

            <Form.Item name="checkbox-group" label="多选">
              <Checkbox.Group>
                <Row>
                  <Col span={8}>
                    <Checkbox value="A" style={{ lineHeight: '32px' }}>
                      A
                    </Checkbox>
                  </Col>
                  <Col span={8}>
                    <Checkbox value="B" style={{ lineHeight: '32px' }} disabled>
                      B
                    </Checkbox>
                  </Col>
                  <Col span={8}>
                    <Checkbox value="C" style={{ lineHeight: '32px' }}>
                      C
                    </Checkbox>
                  </Col>
                </Row>
              </Checkbox.Group>
            </Form.Item>
          </Form>
        </Card>

        <Card
          title="弹窗"
          style={{ marginTop: '16px' }}
          bodyStyle={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            background: 'rgba(0, 0, 0, 0.45)',
          }}
        >
          <Card
            style={{ width: '60%' }}
            title="弹窗标题"
            bodyStyle={{ padding: 0 }}
          >
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            <div
              style={{
                display: 'flex',
                justifyContent: 'flex-end',
                borderTop: '1px solid #f5f5f5',
                padding: '.5rem',
              }}
            >
              <Button type="default">取消</Button>
              <Button type="primary" style={{ marginLeft: '.5rem' }}>
                保存
              </Button>
            </div>
          </Card>
        </Card>
      </ScrollBarLayout>
    </div>
  );
});
